<template>
  <div>
  	<HeaderBuy></HeaderBuy>
  	<div class="buy-plan-content">
  		<h3>购买套餐</h3>
    	<div class="buy-plan">
    		<div class="buy-part" v-for="(item,index) in discountMess" :key="index">
    			<div class="buy-part-top">
    				<h5>{{ item.discount }}</h5>
    				<p>{{ item.isStudent }}</p>
	    		  <img src="../../../assets/buyimg/buyplan.png" alt="" />
	    		  <h6><em>{{ item.prise }}</em>{{ item.days }}</h6>
    			</div>
    			<div class="discount-package">
    				<h5>优惠套餐</h5>
    				<ul>
    					<li v-for="(value,index) in item.packages">{{ value }}</li>
    				</ul>
    			</div>
    			<router-link :to='{"name":"buyServe"}'>立即购买</router-link>
    		</div>
    	</div>
  	</div>
  </div>
</template>

<script>
import HeaderBuy from '@/components/header2'
export default {
  components: {
    HeaderBuy
  },
  data () {
    return {
      discountMess: [ // 四个购买套餐的内容
        {
          id: 0,
          discount: '月套餐', // 套餐时长
          isStudent: '', // 是否是学生版套餐
          prise: 899, // 套餐价格
          days: '元/月', // 套餐单位
          packages: ['无'] // 套餐优惠
        },
        {
          id: 1,
          discount: '季度套餐',
          isStudent: '',
          prise: 2599,
          days: '元/季',
          packages: ['优惠102元', '赠送华为手机一套', '会议一次', '培训一次']
        },
        {
          id: 2,
          discount: '年套餐',
          isStudent: '',
          prise: 9888,
          days: '元/年',
          packages: ['优惠900元', '赠送苹果手机一套', '会议一次', '培训一次']
        },
        {
          id: 3,
          discount: '年套餐',
          isStudent: '[学生版]',
          prise: 9888,
          days: '元/年',
          packages: ['赠送小米手机一套', '会议一次', '培训一次']
        }
      ]
    }
  }
}
</script>

<style scoped>
	@import "../../../../static/buy/buyPlan.css";
</style>